<template>
  <div class="ssal-calendar-container" ref="monthbox">
    <div class="week-area">
      <div
        :class="['week-cell', item.weekend ? 'week-red' : '']"
        v-for="item in weekTitle"
        :key="item"
      >
        周{{ item.day }}
      </div>
    </div>
    <div class="month-area">
      <div class="month-area-container">
        <div class="month-row" v-for="(item, index) in month" :key="item.id">
          <div class="month-view">
            <div
              v-for="(date, idx) in item"
              ref="monthCube"
              :class="['month-date', date.disable ? 'date-disabled' : '', date.weekend ? 'date-weekend' : '']"
              :key="date.id"
              :data-date="date.fullDate"
              :data-index="index"
              :data-idx="idx"
              @contextmenu.prevent="handleMonthRight"
              @click.prevent="handleMonthLeft"
              @dragenter="handledrapEnter($event)"
              @dragleave="handledragLevel($event)"
              @dragover="handledrapOver($event)"
              @drop="handledragLevel($event)"
            >
              <div class="original-day" :data-index="index" :data-idx="idx" :data-date="date.fullDate">
                <div :class="['day', date.isDay ? 'today' : '']" :data-date="date.fullDate" :data-index="index" :data-idx="idx">
                  {{ Number(date.date) }}
                </div>
                <template v-if="date.lunar">
                  <div class="lunar" v-if="!date.lunar.Term" :data-index="index" :data-idx="idx" :data-date="date.fullDate">
                    {{ date.lunar.IDayCn == "初一"  ? date.lunar.IMonthCn : date.lunar.IDayCn }}
                  </div>
                  <div class="lunar" v-else :data-index="index" :data-idx="idx" :data-date="date.fullDate">
                    {{ date.lunar.Term }}
                  </div>
                </template>
              </div>
            </div>
          </div>
          <EventMonthItem
            v-if="events.length && month"
            :events="events"
            :month="month"
            :row-index="index"
            :cube="monthCube"
            :dropData="dropMessage"
            @getMonthEvent="getMonthEvent"
            @exchangeDate="exchangeDate"
            @closeModal="closeMore"
          >
            <template v-slot:default="slotItem">
              {{ slotItem.title || "（无主题）" }}
            </template>
          </EventMonthItem>
        </div>
      </div>
      <div
        v-if="showTime"
        class="time-placeholder-box time-month-placeholder-box"
      >
        <div class="close-bg" @click="showTime = false"></div>
        <div
          class="time-placeholder timeRef"
          :style="{
            top: timeDistance.top,
            left: timeDistance.left,
            width: 'calc(100% / 7)',
            marginLeft: 0,
          }"
          id="timeRef"
        >
          添加事件
        </div>
      </div>
    </div>
    <EventDetail
      :dialogEventDetailVisible="dialogEventDetailVisible"
      :event="itemInfo"
      @edit-info="editInfo"
      @del-event="delEvent"
    ></EventDetail>
    <EventForm
      :dialogEventFormVisible="dialogEventFormVisible"
      :default-form="defaultForm"
      :belongsUser="belongsUser"
      @close-form="CloseForm"
      @get-form="getForm"
    ></EventForm>
    <model-option-box
      :dialogModelVisible="dialogModelVisible"
      @close-form="CloseModel"
      @get-quick="getQuick"
    ></model-option-box>
  </div>
</template>

<script>
import EventMonthItem from "../EventMonthItem/index.vue";
import EventDetail from "../EventDetail/index.vue";
import EventForm from "../EventForm/index.vue";
import ModelOptionBox from "../ModelOptionBox/index.vue";
import { ref, toRefs } from "vue";
export default {
  name: "MonthPage",
  components: {
    EventMonthItem,
    EventDetail,
    EventForm,
    ModelOptionBox,
  },
  props: {
    weekTitle: {
      type: Array,
      default() {
        return [];
      },
    },
    month: {
      type: Object,
      default() {
        return {};
      },
    },
    events: {
      type: Array,
      default() {
        return [];
      },
    },
    belongsUser: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  emits: ['closeMore'],
  setup(props, context) {
    const { events, month } = toRefs(props);
    let showTime = ref(false);
    let showHeaderTime = ref(false);
    let timeDistance = ref({
      top: 0,
      left: 0,
    });
    let defaultForm = ref({});
    let itemInfo = ref({});
    let dialogEventFormVisible = ref(false);
    let dialogEventDetailVisible = ref(false);
    let dialogModelVisible = ref(false);
    let monthCube = ref(null);
    let monthbox = ref(null);
    let dropMessage = ref({});
    let num = 0;
    // 左键月
    const handleMonthLeft = (e) => {
      num++;
      setTimeout(() => {
        if (num == 1) {
          const { fullDate } = getMonthDistance(e);
          defaultForm.value["actionStartTime"] = fullDate + " 00:00";
          defaultForm.value["actionEndTime"] = fullDate + " 23:59";
          defaultForm.value["isAllDay"] = true;
          dialogEventFormVisible.value = !dialogEventFormVisible.value;
        }
        if (num == 2) {
          console.log("双击");
        }
        if (num > 2) {
          num = 0;
        }
        num = 0;
      }, 250);
    };
    // 右键月
    const handleMonthRight = (e) => {
      getMonthDistance(e);
      dialogModelVisible.value = !dialogModelVisible.value;
    };
    // 关闭model
    const CloseModel = () => {
      showHeaderTime.value = false;
      showTime.value = false;
    };
    // 获取月的事件格子距离
    const getMonthDistance = (e) => {
      const index = e.target.dataset.index;
      const idx = e.target.dataset.idx;
      const arr = Object.keys(month.value);
      timeDistance.value.top = `calc((100% / ${arr.length}) * ${index} + 40px)`;
      timeDistance.value.left = `calc(100% / ${month.value[index].length} * ${idx})`;
      showTime.value = true;
      return {
        fullDate: e.target.dataset.date,
      };
    };
    // monthEvent
    const getMonthEvent = (e) => {
      if(e) {
        const id = e.target ? e.target.dataset.id : e.dataset.id;
        const info = events.value.find((item) => {
          return item.id == id;
        });
        itemInfo.value = {
          info,
          ele: e,
        };
        dialogEventDetailVisible.value = !dialogEventDetailVisible.value;
      }
    };
    const editInfo = (e) => {
      const { event } = e;
      defaultForm.value = event;
      dialogEventFormVisible.value = !dialogEventFormVisible.value;
    };
    // 关闭Form
    const CloseForm = () => {
      showHeaderTime.value = false;
      showTime.value = false;
      defaultForm.value = {};
    };
    // 获取form
    const getForm = (e) => {
      context.emit('submitForm', e)
    };
    // 删除form
    const delEvent = (e) => {
      context.emit('delEvent', e)
      dialogEventDetailVisible.value = !dialogEventDetailVisible.value;
    };
    const handledrapEnter = (e) => {
      e.preventDefault();
      e.dataTransfer.dropEffect = "move";
      e.target.style.background = "#f4f4f4";
    };
    const handledrapOver = (e) => {
      e.preventDefault();
      e.dataTransfer.dropEffect = "move";
    };
    const handledragLevel = (e) => {
      dropMessage.value = e.target.dataset;
      e.target.style.background = "unset";
    };
    // 快捷操作
    // eslint-disable-next-line no-unused-vars
    const getQuick = (e) => {
      // console.log(e)
    };
    const exchangeDate = e => {
      context.emit('exchangeDate', e)
    }
    const closeMore = () => {
      context.emit('closeMore', true)
    }
    return {
      showTime,
      timeDistance,
      handleMonthLeft,
      handleMonthRight,
      getMonthEvent,
      itemInfo,
      defaultForm,
      monthCube,
      editInfo,
      CloseForm,
      getForm,
      dialogEventDetailVisible,
      dialogEventFormVisible,
      dialogModelVisible,
      delEvent,
      handledrapEnter,
      handledrapOver,
      monthbox,
      CloseModel,
      getQuick,
      handledragLevel,
      dropMessage,
      exchangeDate,
      closeMore
    };
  },
};
</script>

<style scoped lang="scss">
.ssal-calendar-container {
  height: calc(100% - 41px);
  border: 1px solid #e4e7ed;
  position: relative;
  box-sizing: border-box;
  .month-area {
    height: calc(100% - 30px);
    cursor: pointer;
    min-height: 470px;
    .month-area-container {
      height: 100%;
      min-height: 470px;
      cursor: pointer;
      overflow: auto;
    }
  }
  .month-row {
    height: calc(100% / 6);
    min-height: calc(470px / 6);
  }
  .month-view {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    height: calc(100% / 6 - 4px);
    position: absolute;
    left: 0;
    right: 0;
    .month-date {
      width: calc(100% / 7);
      height: 100%;
      border-right: 1px solid #ebeef5;
      border-bottom: 1px solid #ebeef5;
      box-sizing: border-box;
      &:nth-child(7n + 7) {
        border-right: none;
      }
    }
    .original-day {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 5px;
    }
    .lunar {
      font-size: 12px;
      color: #909399;
    }
    .day {
      color: #303133;
      font-size: 14px;
      // position: relative;
      // z-index: 2;
      width: 25px;
      height: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
    }
    .today {
      color: #fff;
      background: var(--ss-color-primary);
      border-radius: 50%;
    }
    .date-disabled .day,
    .date-disabled .lunar {
      color: #c0c4cc;
      opacity: 0.6;
    }
    .date-weekend .day {
      color: #f56c6c !important;
    }
  }
  .time-placeholder {
    position: absolute;
    z-index: 999;
    margin-left: 80px;
    background: #ecf5ff;
    border: 1px dashed var(--ss-color-primary);
    font-size: 12px;
    text-align: center;
    color: var(--ss-color-primary);
    height: 20px;
    box-sizing: border-box;
    line-height: 20px;
  }
  .close-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    background: rgba(0, 0, 0, 0.2);
  }
  .time-month-placeholder-box {
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .week-area {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    height: 30px;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.06);
    .week-cell {
      width: calc(100% / 7);
      text-align: center;
      border-right: 1px solid #e4e7ed;
      font-size: 13px;
      color: #303133;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      &:last-child {
        border-right: none;
      }
    }
    .week-red {
      color: #f56c6c;
    }
  }
}
</style>